<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>精益管控</title>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <link rel="stylesheet" href="../css/Multiselect.css"/>
    <link rel="stylesheet" href="../css/prettify.css"/>
    <link rel="stylesheet" href="../css/jygk-video.css"/>
</head>
<body>
<div class="container">
    <p class="name">精益管控</p>
    <!-- list-->
    <div class="list">
        <ul class="select">
            <li>
                <select id="province" multiple="multiple"></select>
            </li>
            <li>
                <select id="area" multiple="multiple"></select>
            </li>
            <li>
                <select id="voltage" multiple="multiple"></select>
            </li>
            <li>
                <select id="substation" multiple="multiple"></select>
            </li>
            <li>
                <select id="instation" multiple="multiple"></select>
            </li>
        </ul>
        <!-- table-->
        <div class="table">
            <table>
                <tbody>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                    <tr>
                        <td>北京</td>
                        <td>大兴区</td>
                        <td>交流110kV</td>
                        <td>金星站</td>
                        <td>大门</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- -->
    <div class="video">
        <ul class="video-list">
            <li>
                <object id='playerMap' classid='CLSID:D71AE918-F986-413A-9BA7-2644172CA228' scroll='no'
                        standby='正在加载视频控件' codebase="assets/OcxPlayer/GridControl.cab#version=2,0,0,8"
                        width="100%" height="100%">
                </object>
                <img class="video-border" src="img/video-border2.png" alt=""/>
                <p class="video-name">张华变电站视频</p>
                <img src="img/play.png" alt="" class="play"/>
            </li>

        </ul>
        <ul class="pages">
            <li class="hover">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>...</li>
            <li> << </li>
            <li> >> </li>
            <li>下一页</li>
        </ul>
    </div>
    <div class="tab">
        <p class="active">变电</p>
        <p>输电</p>
        <p>配网</p>
    </div>
</div>
<script src="../js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/Multiselect.js"></script>
<script src="js/prettify.js"></script>
<script src="js/jygk-video.js"></script>

<script language="JavaScript" type="text/JavaScript" charset="UTF-8">

    //调用ocx接口方法要传递的参数变量
    var localIp, sipIp, sipPort, httpIp, httpPort, userCode, userName, pswd;

    //设置调用ocx接口方法要传递的参数变量值
    function setConfigInfo(infoArray) {
        this.sipIp = infoArray[2];
        this.sipPort = infoArray[3];
        this.httpIp = infoArray[0];
        this.httpPort = infoArray[1];
        this.userCode = infoArray[4];
        this.userName = infoArray[5];
        this.pswd = infoArray[6];
        this.localIp = infoArray[7];
    }

    //页面加载时调用ocxHtmlLoad方法
    if (window.attachEvent) {
        window.attachEvent("onload", ocxHtmlLoad);
    } else if (window.addEventListener) {
        window.addEventListener("load", ocxHtmlLoad, false);
    }
    //页面改变大小时调用ocxHtmlResize方法
//    if (window.attachEvent) {
//        window.attachEvent("onresize", ocxHtmlResize);
//    } else if (window.addEventListener) {
//        window.addEventListener("resize", ocxHtmlResize, false);
//    }
//    if (window.attachEvent) {
//        window.attachEvent("onbeforeunload", uninit); //页面在反加载之前调用uninit方法
//    } else if (window.addEventListener) {
//        window.attachEvent("onbeforeunload", uninit);
//    }

    var localIPArray;
    var videoMainWndIndex, historyMainWndIndex;
    function ocxHtmlLoad() {
        try {
            var result;
            //httpIp： httpIP地址
            //httpPort：httpIP端口
            //sipIp：   sipIP地址
            //sipPort： sip端口
            //userCode： 用户编码
            //userName： 用户名称
            //pswd：用户密码（Md5秘文）
            //localIp：本地ip地址
            var infoArray = ["10.1.150.251", 7506, "10.1.150.251", 7501, "990010000004000001", "role_ywy", "fca812f055d5fdcd3a355b63ceaad991", "10.1.166.216"];
            setConfigInfo(infoArray);
            result = document.getElementById('playerMap').ocxInitLocalAddr(localIp, 0, localIp, 0);
            console.log(result);
            if (result == 0) {

            } else {
                alert("视频播放控件初始化错误！");
                return;
            }
        } catch (err) {
        }
        try {
//            判断控件是否加载成功
            var isResult = document.getElementById('playerMap').ocxOcxIsInit();

            //              获取省公司名字
            var province = document.getElementById('playerMap').ocxVideoResQuery('990010000000000000');
            console.log(province);
            $(province).find("Item").each(function(i) {
                var provinceName=$(this).attr("Name").replace('平台','');
                var code = $(this).attr('Code');
                if(provinceName == '新源' || provinceName == '运行公司' || provinceName == '灾备中心' || provinceName == '信通调度' || provinceName == '国调调度'){
                    return;
                }else{
                    $("<option></option>").appendTo($('#province')).text(provinceName).attr('value', code);
                }
            });
            if (isResult) {
                alert('控件加载成功');
                document.getElementById('playerMap').focus();

                //创建窗口(实时视频)
                videoMainWndIndex = document.getElementById('playerMap').ocxCreateWindow(4, 4, 1);
                //创建窗口(历史视频)
                //historyMainWndIndex = document.getElementById('playerMap').ocxCreateWindow(16, 1, 0);
                //请求Flex执行OCX端发起执行OCX登录
                loginServer(localIp, sipIp, sipPort, httpIp, httpPort, userCode, userName, pswd);
            } else {
                alert("ocx初始化未成功！");
            }
        } catch (err) {
            txt = "视频播放控件初始化错误，无法自动下载安装控件.\n\n如果本站点不是可信任站点，请先配置为可信任站点，再重新登陆系统.";
            alert(txt);
            return;
        }
    }
    function ocxHtmlResize() {
        iBody_onresizestart(this);
    }

    //创建窗口
    function oCreateWindow(sMaxWinNums, sDefaultWinNums) {
        playerMap.ocxCreateWindow(sMaxWinNums, sDefaultWinNums);
    }

    //获取报警监听ip
    function ocxLoginServer(args) {
        isReTimer = args[0]
        var infoArray = this.parent.document.getElementById('index').getOCX(localIPArray);
        setConfigInfo(infoArray);
        //ocx登录
        loginServer(localIp, sipIp, sipPort, httpIp, httpPort, userCode, userName, pswd);
        iBody_onresizestart(this);
    }

    //新的登录视频服务器 初始化方式
    function loginServer(localIp, sipIp, sipPort, httpIp, httpPort, userCode, userName, pswd) {
        //alert("localIp + sipIp + sipPort + httpIp + httpPort + userCode + userName + pswd=" +localIp + sipIp + sipPort + httpIp + httpPort + userCode + userName + pswd);
        try {
            //初始化本地信息
            var result = document.getElementById('playerMap').ocxInitLocalAddr(localIp, 0, localIp, 0);
            var loginResult = document.getElementById('playerMap').ocxLogin(httpIp, httpPort, userName, pswd, 1, 0);
            console.log(loginResult);
            if (loginResult == 0) {
                setTimeout(testOpenVideo,1000)
            } else {
                //获取错误信息
                GetOCXInitErrorString(loginResult);
            }
        } catch (err) {
            txt = "ocx控件登录错误，点击“确定”继续。\n\n";
            nalert(txt);
            return;
        }
        //parent.window.closeLoading();

    }
    function testOpenVideo() {
        //startVideo([videoMainWndIndex, 0, 150.0, "040210000003020001", "海康球机1"]);
        startVideo([videoMainWndIndex, 0, 150.0, "040210000003040001", "崇州站A-大门"]);

    }

    // 获取错误信息
    function GetOCXInitErrorString(error) {
        var str = "未知错误";
        switch (error) {
            case 180: str = "密码错误"; break;
            case 168: str = "权限不足"; break;
            case 169: str = "用户不存在"; break;
            //case 171:str = "负荷满";break;
            case 171: str = "连接超时"; break;
        }
        if (error != 0) {
            alert("控件登录失败:" + str);
        }
    }
    //反初始化
    function uninit() {
        //控件注销
        try {
            var r3 = document.getElementById('playerMap').ocxLogout();
        } catch (err) {
            return;
        }
        try {
            var r4 = document.getElementById('playerMap').ocxUnInit();
        } catch (err) {
            return;
        }
    }
    //设置窗口显示个数
    function pchenge(args) {
        //sMainWndIndex,sWndNums
        document.getElementById('playerMap').ocxSetWndNums(args[0], args[4]);
    }
    //调阅视频
    //sMainWndIndex 主窗口号
    //sSubWndNo 子窗口号
    //sDecoderTag 解码标签
    //p_cameraCode 摄像头编码
    //pNotes 摄像头名称
    function startVideo(args) {
        //sMainWndIndex,sSubWndNo,sDecoderTag,p_cameraCode,pNotes
        alert("sMainWndIndex="+args[0]+"//sSubWndNo="+ args[1]+"//sDecoderTag="+args[2]+"//p_cameraCode="+args[3]+"//pNotes="+args[4]);
        var result = document.getElementById('playerMap').ocxVideoStart(
                args[0], args[1], args[2], args[3], args[4]);
        document.getElementById('playerMap').ocxSetWndNums(args[0], args[0]);
        return result;
    }
    //停止调阅视频播放
    function stopVideo(args) {
        //sMainWndIndex,sSubWndNo
        document.getElementById('playerMap').ocxVideoStop(args[0], args[1]);

    }
    //停止调阅所有视频播放
    function stopAllVideo(args) {
        //sMainWndIndex,sSubWndNo
        var result = document.getElementById('playerMap').ocxVideoStopAll(
                args[0]);
        //alert(result);
    }

    //重新调整窗口大小
    function iBody_onresizestart(de) {
        var _height = de.document.body.offsetHeight;
        var _width = de.document.body.offsetWidth;
        document.getElementById('playerMap').ocxSetWindowSize(0, _height,
                _width);
    }
    //获取当前聚焦窗口
    function ocxGetActiveWndNo(v_sMainWndIndex) {
        var index = document.getElementById('playerMap').ocxGetActiveWndNo(
                v_sMainWndIndex);
        return index;
    }
    //获取当前是否在录像
    function ocxExistRecording() {
        var result = document.getElementById('playerMap').ocxExistRecording();
        return result;
    }
    function showXXX(sMainWndIndex, sSubWndNo, pCode) {
        // this.parent.document.getElementById('index').getActiveWndCode(sMainWndIndex, sSubWndNo, pCode);
    }

    function getRPath() {
        var pathName = window.location.pathname;
        var webName = pathName == '' ? '' : pathName.substring(0, pathName
                .lastIndexOf('/'));
        var rootPath = webName == '' ? window.location.protocol + '//'
        + window.location.host + webName : window.location.protocol
        + '//' + window.location.host + webName + '/';
        var path = rootPath + "assets/OcxPlayer/GridControl.zip";
        window.location.href = path;

    }


        $('#province').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                var code=$(option).val();
//                根据code 获取下一级（地市公司）列表
                var area = document.getElementById('playerMap').ocxVideoResQuery(code);
                console.log(area);
                $(area).find("Item").each(function(i) {
                    var areaName=$(this).attr("Name");
                    var code = $(this).attr('Code');
                    $("<option></option>").appendTo($('#area')).text(areaName).attr('value', code);
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '省公司',
            numberDisplayed: 10,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#area').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                var code=$(option).val();
//                根据code 获取下一级（电压等级）列表
                var voltage = document.getElementById('playerMap').ocxVideoResQuery(code);
                console.log(voltage);
                $(voltage).find("Item").each(function(i) {
                    var voltageName=$(this).attr("Name");
                    var code = $(this).attr('Code');
                    $("<option></option>").appendTo($('#voltage')).text(voltageName).attr('value', code);
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '地市公司',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#voltage').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                var code=$(option).val();
//                根据code 获取下一级（变电站）列表
                var substation = document.getElementById('playerMap').ocxVideoResQuery(code);
                console.log(substation);
                $(substation).find("Item").each(function(i) {
                    var substationName=$(this).attr("Name");
                    var code = $(this).attr('Code');
                    $("<option></option>").appendTo($('#substation')).text(substationName).attr('value', code);
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '电压等级',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#substation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val());
                var code=$(option).val();
//                根据code 获取下一级（站内区域）列表
                var instation = document.getElementById('playerMap').ocxVideoResQuery(code);
                console.log(instation);
                $(instation).find("Item").each(function(i) {
                    var instationName=$(this).attr("Name");
                    var code = $(this).attr('Code');
                    $("<option></option>").appendTo($('#instation')).text(instationName).attr('value', code);
                });
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '变电站',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });
        $('#instation').multiselect({
            enableClickableOptGroups: true,
            enableCollapsibleOptGroups: true,
            includeSelectAllOption: true,
            buttonWidth: '308px',
            dropRight: true,
            maxHeight: 357,
            onChange: function(option, checked) {
                alert($(option).val())
                console.log(videoMainWndIndex);
//                startVideo([videoMainWndIndex, 0, 150.0, "040210000003040001", "崇州站A-大门"]);
                /*if(条件) {
                 this.clearSelection();//清除所有选择及显示
                 }*/
            },
            nonSelectedText: '站内区域',
            numberDisplayed: 60,
            enableFiltering: true,
            allSelectedText:'全部',
        });

</script>
<script language="javascript" type="text/javascript" for="playerMap" event="OnClickActiveWnd(sMainWndIndex,sSubWndNo,pCode)">
    showXXX(sMainWndIndex, sSubWndNo, pCode);
</script>

</body>
</html>